<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:panelGrid xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:sijyp="http://java.sun.com/jsf/composite/sijyp"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	id="formAlbumFotografico" style="width:100%">

	<br />

	<h:panelGrid columns="4" width="100%" id="headderAlbumForm"
		columnClasses="firstColumnStyle, , , ">
		<ui:include src="/general/topBienesFormsFields.xhtml">
			
			
			<ui:param name="etapaGestionValue"
				value="#{bienManager.bien.tpEtapaGestion.nombre}" />
			<ui:param name="requiredEtapaGestion" value="false" />
			<ui:param name="disabledEtapaGestion" value="true" />
			<ui:param name="prepId" value="albumFotografico" />
		</ui:include>
	</h:panelGrid>
	<hr />
	<br />
	<h:panelGrid columns="4" columnClasses="col16, col17" width="100%">
		<h:panelGrid columns="2">
			<h:outputText value="${msg['bienes.albumFotografico.nombre']}" />
			<h:outputText value="*"
				rendered="#{!bienAlbumFotograficoManager.consultaAlbum and !bienAlbumFotograficoManager.consultaFoto}" />
		</h:panelGrid>
		<h:inputText id="nombreAlbum"
			value="#{bienAlbumFotograficoManager.bienAlbumFotografico.nombre}"
			required="true" requiredMessage="${msg['general.requerido']}"
			disabled="#{bienAlbumFotograficoManager.consultaAlbum}" />
		<h:outputText value="" />
		<h:outputText value="" />
		<h:outputText value="" />
		<h:message for="nombreAlbum" errorClass="validationErrorMessage" />
	</h:panelGrid>

	<hr width="100%" />

	<h:panelGrid id="fileUploadFoto" columns="4"
		columnClasses="col16, col17, col16, col17" style="margin:0 auto;">
		<h:outputText value="" />
		<h:panelGrid columns="2" style="height:40px">
			<h:outputText value="${msg['bienes.fileUpload.anexo']}" />
			<h:outputText value="*"
				rendered="#{!bienAlbumFotograficoManager.consultaAlbum and !bienAlbumFotograficoManager.consultaFoto}" />
		</h:panelGrid>
		<rich:fileUpload maxFilesQuantity="1"
			immediateUpload="true"
			addLabel="${msg['bienes.fileUpload.examinar']}" clearAllLabel=""
			deleteLabel="${msg['bienes.fileUpload.borrar']}"
			doneLabel="${msg['bienes.fileUpload.finalizado']}" listHeight="40px"
			uploadLabel="${msg['bienes.fileUpload.cargar']}"
			clearLabel="${msg['bienes.fileUpload.limpiar']}"
			sizeExceededLabel="${msg['bienes.fileUpload.excedeMaximo']}"
			acceptedTypes="jpg, png, bmp, gif, tiff, tif, pdf, jpeg"
			fileUploadListener="#{bienAlbumFotograficoManager.uploadListener}"
			rendered="#{!bienAlbumFotograficoManager.ocultarUpload}"
			ontyperejected="alert('${msg['bienes.albumFotografico.tiposArchivosInvalidos']}');">
			<f:ajax event="uploadcomplete" render="botonesFoto" />
		</rich:fileUpload>
		<h:panelGrid id="linkUpload" columns="3" styleClass="rf-fu"
			rendered="#{bienAlbumFotograficoManager.ocultarUpload}">
			<h:commandLink
				value="#{fn:substring(bienAlbumFotograficoManager.bienAlbumFotograficoFoto.nombre,0,30)}"
				action="#{bienAlbumFotograficoManager.download()}" />
			&nbsp;
			<a4j:commandLink value="${msg['bienes.fileUpload.limpiar']}"
				action="#{bienAlbumFotograficoManager.limpiarUpload}"
				render=":formTabs:formAlbumFotografico"
				rendered="#{!bienAlbumFotograficoManager.consultaFoto}" />
		</h:panelGrid>
	</h:panelGrid>

	<h:panelGrid width="100%" columns="2" columnClasses="col16,col84">
		<h:panelGrid columns="2">
			<h:outputLabel value="${msg['bienes.ubicacion.descripcion']}"
				for="descripcionFoto" />
			<h:outputText value="*"
				rendered="#{!bienAlbumFotograficoManager.consultaAlbum and !bienAlbumFotograficoManager.consultaFoto}" />
		</h:panelGrid>
		<h:panelGrid width="100%">
			<h:inputTextarea id="descripcionFoto" style="width:100%" rows="4"
				styleClass="long count250" required="true"
				requiredMessage="${msg['general.requerido']}"
				value="#{bienAlbumFotograficoManager.bienAlbumFotograficoFoto.descripcion}"
				disabled="#{bienAlbumFotograficoManager.consultaFoto}">
				<f:validateLength maximum="250" />
				<f:converter converterId="emptyToNullConverter" />
			</h:inputTextarea>
		</h:panelGrid>
		<h:outputText value="" />
		<h:message id="msgDescFoto" for="descripcionFoto" />
	</h:panelGrid>
	<br />

	<h:panelGroup id="botonesFoto" style="text-align:center;"
		layout="block">
		<h:panelGroup
			rendered="#{bienAlbumFotograficoManager.mostarBotonesFoto}">
			<h:commandButton
				value="${msg['bienes.albumFotografico.boton.adicionar']}"
				action="#{bienAlbumFotograficoManager.guardarFoto()}"
				rendered="#{!bienAlbumFotograficoManager.edicionFoto and !bienAlbumFotograficoManager.consultaFoto}">
				<f:ajax execute="@this descripcionFoto fileUploadFoto"
					render="info botonesFoto descripcionFoto fileUploadFoto msgDescFoto :sijypMessages" />
			</h:commandButton>
			<h:commandButton value="${msg['boton.modificar']}"
				action="#{bienAlbumFotograficoManager.modificarFoto()}"
				rendered="#{bienAlbumFotograficoManager.edicionFoto and !bienAlbumFotograficoManager.consultaFoto}">
				<f:ajax execute="@this descripcionFoto fileUploadFoto"
					render="info botonesFoto descripcionFoto fileUploadFoto msgDescFoto :sijypMessages" />
			</h:commandButton>
			<h:commandButton value="${msg['boton.cancelar']}"
				action="#{bienAlbumFotograficoManager.cancelarAccionFoto()}"
				rendered="#{!bienManager.reading}">
				<f:ajax
					render="info botonesFoto descripcionFoto fileUploadFoto msgDescFoto :sijypMessages"
					execute="@this" />
			</h:commandButton>
		</h:panelGroup>
	</h:panelGroup>

	<br />

	<h:panelGroup id="info" layout="block">
		<script type="javascript">
addTextAreaCounterByClass();</script>
		<rich:panel bodyClass="album">
			<rich:dataGrid columns="#{bienAlbumFotograficoManager.tamanoLista}"
				value="#{bienAlbumFotograficoManager.bienAlbumFotografico.bienAlbumFotograficoFotos}"
				var="foto" rowKeyVar="row">
				<h:panelGrid columns="2" columnClasses=",accionesImagen">
					<a4j:commandLink immediate="true" execute="@this"
						render=":formTabs:formAlbumFotografico"
						oncomplete="#{rich:component('popupImagen')}.show()">
						<a4j:mediaOutput id="asd" element="img" mimeType="image/png"
							createContent="#{bienAlbumFotograficoManager.pintarImagenes}"
							value="#{row}" style="width:100px; height:100px;"
							cacheable="false" title="#{foto.descripcion}">
							<f:param value="#{bienAlbumFotograficoManager.timeStamp}"
								name="time" />
						</a4j:mediaOutput>
						<f:setPropertyActionListener
							target="#{bienAlbumFotograficoManager.fotoTemporal}"
							value="#{foto}" />
					</a4j:commandLink>
					<h:panelGrid columns="2" style="vertical-align:bottom">
						<h:commandLink value=""
							action="#{bienAlbumFotograficoManager.editarFoto()}"
							rendered="#{!bienAlbumFotograficoManager.consultaFoto}">
							<h:graphicImage value="/resources/images/icons/ico_pencil.png"
								title="${msg['boton.editar']}" />
							<f:setPropertyActionListener
								target="#{bienAlbumFotograficoManager.fotoTemporal}"
								value="#{foto}" />
							<f:ajax execute="@this"
								render=":formTabs:info :formTabs:botonesFoto :formTabs:descripcionFoto :formTabs:fileUploadFoto :sijypMessages" />
						</h:commandLink>
						<h:commandLink value=""
							onclick="#{rich:component('confirmDeleteFoto')}.show()"
							rendered="#{!bienAlbumFotograficoManager.consultaFoto}">
							<h:graphicImage value="/resources/images/icons/ico_delete.png"
								title="${msg['boton.eliminar']}" />
							<f:setPropertyActionListener
								target="#{bienAlbumFotograficoManager.fotoTemporal}"
								value="#{foto}" />
							<f:ajax execute="@this"
								render=":formTabs:info :formTabs:botonesFoto :formTabs:descripcionFoto :formTabs:fileUploadFoto :sijypMessages" />
						</h:commandLink>
					</h:panelGrid>

					<h:outputText value="N° Foto: #{foto.posicion+1}" />
				</h:panelGrid>
			</rich:dataGrid>
		</rich:panel>
	</h:panelGroup>

	<br />

	<h:panelGroup style="text-align:center;" layout="block">
		<a4j:commandButton value="${msg['boton.adicionar']}"
			render=":formTabs:formAlbumFotografico :sijypMessages"
			execute="@this nombreAlbum headderAlbumForm"
			action="#{bienAlbumFotograficoManager.guardarAlbum()}"
			rendered="#{!bienAlbumFotograficoManager.edicionAlbum and !bienAlbumFotograficoManager.consultaAlbum}" />
		<a4j:commandButton value="${msg['boton.modificar']}"
			render=":formTabs:formAlbumFotografico :sijypMessages"
			execute="@this nombreAlbum headderAlbumForm"
			action="#{bienAlbumFotograficoManager.modificarAlbum()}"
			rendered="#{bienAlbumFotograficoManager.edicionAlbum and !bienAlbumFotograficoManager.consultaAlbum}" />
		<h:commandButton value="${msg['boton.cancelar']}"
			rendered="#{!bienManager.reading }">
			<f:ajax execute="@this"
				listener="#{bienAlbumFotograficoManager.cancelarAccion()}"
				render=":formTabs:formAlbumFotografico :sijypMessages" />
		</h:commandButton>
	</h:panelGroup>

	<br />

	<h:panelGroup>
		<rich:dataTable id="richTable3" var="record_"
			value="#{bienAlbumFotograficoManager.bienAlbumFotograficoDataModel}"
			rows="10" noDataLabel="${msg['general.registrosNoEncontrados']}"
			style="margin:0 auto;">

			<ui:include src="/resources/sijyp/jpaColumn.xhtml">
				<ui:param name="bean" value="#{bienAlbumFotograficoManager}" />
				<ui:param name="propertyTitle"	value="bienes.resultadoConsultaBienes.tablaBienes.idBien" />
				<ui:param name="explicitProperty" value="#{record_.bien.idBien}" />
				<ui:param name="propertyFilter" value="bien.idBien" />
				<ui:param name="id" value="columnaOculta" />
				<ui:param name="componentRender" value="richTable3" />
				<ui:param name="hideColumn" value="true" />
			</ui:include>
				
			<ui:include src="/resources/sijyp/jpaColumn.xhtml">
				<ui:param name="bean" value="#{bienAlbumFotograficoManager}" />
				<ui:param name="propertyTitle"	value="bienes.ubicacion.etapaDeGestion" />
				<ui:param name="explicitProperty"	value="#{record_.etapaGestionNombre}" />
				<ui:param name="propertyFilter"	value="bien.tpEtapaGestion.tpEtapaGestion" />
				<ui:param name="componentRender" value="richTable3" />
				<ui:param name="hideColumn" value="true" />
			</ui:include>
			<ui:include src="/resources/sijyp/jpaColumn.xhtml">
				<ui:param name="bean" value="#{bienAlbumFotograficoManager}" />
				<ui:param name="propertyTitle"	value="bienes.albumFotografico.nombreAlbum" />
				<ui:param name="explicitProperty" value="#{record_.nombre}" />
				<ui:param name="propertyFilter" value="nombre" />
				<ui:param name="componentRender" value="richTable3" />
			</ui:include>
			<ui:include src="/resources/sijyp/jpaColumn.xhtml">
				<ui:param name="bean" value="#{bienAlbumFotograficoManager}" />
				<ui:param name="propertyTitle"	value="bienes.albumFotografico.numeroFotos" />
				<ui:param name="explicitProperty" value="#{record_.numeroFotografias}" />
				<ui:param name="propertyFilter"	value="bienAlbumFotograficoFotos.size" />
				<ui:param name="componentRender" value="richTable3" />
			</ui:include>
			<rich:column>
				<f:facet name="header">
					<sijyp:sortTable title="${msg['bienes.documentos.accion']}"></sijyp:sortTable>
				</f:facet>
				<h:panelGrid columns="3"
					columnClasses="icon_space,icon_space,icon_space,icon_space,icon_space">

					<a4j:commandLink value="" execute="@this"
						render=":formTabs:formAlbumFotografico :sijypMessages"
						action="#{bienAlbumFotograficoManager.editarAlbum()}"
						rendered="#{!bienAlbumFotograficoManager.consultaAlbum and !bienManager.disableSubtabsEditAction}">
						<h:graphicImage value="/resources/images/icons/ico_pencil.png"
							title="${msg['boton.editar']}" />
						<f:setPropertyActionListener
							target="#{bienAlbumFotograficoManager.albumTemporal}"
							value="#{record_}" />
					</a4j:commandLink>

					<h:graphicImage value="/resources/images/icons/ico_pencil_gray.png"
						title="${msg['boton.editar']}"
						rendered="#{bienManager.disableSubtabsEditAction}" />

					<a4j:commandLink value="" execute="@this"
						render=":formTabs:formAlbumFotografico :sijypMessages"
						action="#{bienAlbumFotograficoManager.consultarAlbum}">
						<h:graphicImage value="/resources/images/icons/ico_details.png"
							title="${msg['boton.consultar']}" />
						<f:setPropertyActionListener
							target="#{bienAlbumFotograficoManager.albumTemporal}"
							value="#{record_}" />
					</a4j:commandLink>

					<a4j:commandLink value="" execute="@this" render="@none"
						oncomplete="#{rich:component('confirmDeleteAlbum')}.show()"
						rendered="#{!bienAlbumFotograficoManager.consultaAlbum and !bienManager.disableSubtabsDeleteAction}">
						<h:graphicImage value="/resources/images/icons/ico_delete.png"
							title="${msg['boton.eliminar']}" />
						<f:setPropertyActionListener
							target="#{bienAlbumFotograficoManager.albumTemporal}"
							value="#{record_}" />
					</a4j:commandLink>

					<h:graphicImage
						value="/resources/images/icons/ico_delete_disabled.png"
						title="${msg['boton.eliminar']}"
						rendered="#{bienManager.disableSubtabsDeleteAction}" />
				</h:panelGrid>
			</rich:column>
			<f:facet name="footer">
				<rich:dataScroller maxPages="10" fastStep="5" fastControls="hide" stepControls="show" />
			</f:facet>
		</rich:dataTable>
	</h:panelGroup>

	<br />

	<sijyp:confirmDialog
		message="${msg['bienes.albumFotografico.confirmarEliminacion']}"
		confirmId="confirmDeleteFoto"
		renderComponents=":sijypMessages confirmDeleteFoto :formTabs:formAlbumFotografico"
		acceptAction="#{bienAlbumFotograficoManager.eliminarFoto()}" />

	<sijyp:confirmDialog message="${msg['general.confirmaBorrar']}"
		confirmId="confirmDeleteAlbum"
		renderComponents="confirmDeleteAlbum :sijypMessages :formTabs:formAlbumFotografico"
		acceptAction="#{bienAlbumFotograficoManager.eliminarAlbum()}" />

	<rich:popupPanel id="popupImagen" style="max-width:100%" modal="true"
		resizeable="true" 
		width="600" height="400"
		left="0" top="0"
		onmaskclick="#{rich:component('popupImagen')}.hide()">
		<f:facet name="header">
			<h:outputText
				value="N° Foto: #{bienAlbumFotograficoManager.fotoTemporal.posicion+1}" />
		</f:facet>
		<f:facet name="controls">
			<h:outputLink value="#"
				onclick="#{rich:component('popupImagen')}.hide(); return false;"
				style="color:white">
                X
            </h:outputLink>
		</f:facet>
		<rich:panel bodyClass="imagenReal">
			<a4j:mediaOutput id="imagenPopUp" element="img" mimeType="image/png"
				
				createContent="#{bienAlbumFotograficoManager.pintarImagenesPopUp}"
				cacheable="false">
				<f:param value="#{bienAlbumFotograficoManager.timeStamp}"
					name="time" />
			</a4j:mediaOutput>
		</rich:panel>
	</rich:popupPanel>
</h:panelGrid>